<script setup lang="ts">
import { useClientThemeStore } from '@/store/modules/client-theme';
import { $t } from '@/locales';
import SettingItem from '../components/setting-item.vue';

defineOptions({ name: 'PageFunc' });

const clientThemeStore = useClientThemeStore();
</script>

<template>
  <ElDivider>{{ $t('theme.page.title') }}</ElDivider>
  <div class="flex-col-stretch gap-12px">
    <SettingItem :label="$t('theme.header.headerVisible')">
      <ElSwitch v-model="clientThemeStore.header.visible" @change="clientThemeStore.setHeaderVisible" />
    </SettingItem>
    <SettingItem :label="$t('theme.tab.tabVisible')">
      <ElSwitch v-model="clientThemeStore.tab.visible" @change="clientThemeStore.setTabVisible" />
    </SettingItem>
    <SettingItem :label="$t('theme.footer.footerVisible')">
      <ElSwitch v-model="clientThemeStore.footer.visible" @change="clientThemeStore.setFooterVisible" />
    </SettingItem>
    <SettingItem :label="$t('theme.page.animate')">
      <ElSwitch v-model="clientThemeStore.page.animate" @change="clientThemeStore.setPageAnimate" />
    </SettingItem>
  </div>
</template> 